<!DOCTYPE html>

<html >
    <head>
        <meta charset="UTF-8">
        <title>class selector</title>

        <style type="text/css">
            /* 选择页面上那些 class 属性中包含了 wrapper 的元素 */
            .wrapper {
                border: 1px solid blue ;
                overflow: hidden ;
            }
            .left {
                float: left ;
                width : 80% ;
                background-color: #dedede;
            }
            .right {
                float : right ;
                width: 20% ;
                background-color: #FFFF00;
            }
            .box { width: 100% ; height: 50px ; border: none ; outline: none ; background-color: transparent ; }
            .btn { width: 100% ; height: 50px ; border: none ; outline: none ; background-color: transparent ; }
        </style>

    </head>
    <body>

        <div class="wrapper">
            <form action="http://www.baidu.com" autocomplete="off">
                <div class="left">
                    <input type="text" name="wd" class="box">
                </div>
                <div class="right">
                    <input type="submit" value="百度一下" class="btn">
                </div>
            </form>
        </div>

        <div class="wrapper">
            <form action="http://www.so.com/s"  autocomplete="off">
                <span class="left">
                    <input type="text" name="q" class="box">
                </span>
                <span class="right">
                    <input type="submit" value="360搜索" class="btn">
                </span>
            </form>
        </div>

        <div class="wrapper">
            <form action="http://www.so.com/s"  autocomplete="off">
                <span class="left">
                    <input type="text" name="q" class="box">
                </span>
                <span class="right">
                    <input type="submit" value="360搜索" class="btn">
                </span>
            </form>
        </div>

    </body>
</html>